Add a very simple first-pass top panel

Add a top panel with a label "Activities" you can click on and
a HH:MM:SS clock. (A little more and we'll be caught up to gnome-0.9.)

svn path=/trunk/; revision=10

diff --git a/js/ui/main.js b/js/ui/main.js
index dfc9f9d384419826f287292ce402104ced3e8421..e4e0f9b209416311822d2d27bbfdaf3bad230594 100644 (file)
--- a/js/ui/main.js
+++ b/js/ui/main.js
@@ -1,13 +1,12 @@
+/* -*- mode: js2; js2-basic-offset: 4; -*- */
+
 const Shell = imports.gi.Shell;
 const Clutter = imports.gi.Clutter;
 
+const Panel = imports.ui.panel;
+
+let panel = null;
+
 function start() {
-    let global = Shell.global_get();
-
-    let message = new Clutter.Label({font_name: "Sans Bold 64px", text: "DRAFT"});
-    message.set_opacity(75);
-    message.set_anchor_point_from_gravity (Clutter.Gravity.CENTER);
-    message.set_rotation(Clutter.RotateAxis.Z_AXIS, - 45, 0, 0, 0);
-    message.set_position(global.screen_width / 2, global.screen_height / 2);
-    global.overlay_group.add_actor(message);
+    panel = new Panel.Panel();
 }

diff --git a/js/ui/panel.js b/js/ui/panel.js
new file mode 100644 (file)
index 0000000..6b1a928
--- /dev/null
+++ b/js/ui/panel.js
@@ -0,0 +1,69 @@
+/* -*- mode: js2; js2-basic-offset: 4; -*- */
+
+const Mainloop = imports.mainloop;
+
+const Shell = imports.gi.Shell;
+const Clutter = imports.gi.Clutter;
+
+const PANEL_HEIGHT = 32;
+const PANEL_BACKGROUND_COLOR = new Clutter.Color();
+PANEL_BACKGROUND_COLOR.from_pixel(0xeeddccff);
+
+function Panel() {
+    this._init();
+}
+
+Panel.prototype = {
+    _init : function() {
+       let global = Shell.global_get();
+
+       global.set_stage_input_area(0, 0, global.screen_width, PANEL_HEIGHT);
+
+       this._group = new Clutter.Group();
+
+       let background = new Clutter.Rectangle({ color: PANEL_BACKGROUND_COLOR,
+                                                reactive: true,
+                                                width: global.screen_width,
+                                                height: PANEL_HEIGHT });
+       this._group.add_actor(background);
+
+       let message = new Clutter.Label({ font_name: "Sans Bold 16px",
+                                         text: "Activities",
+                                         reactive: true });
+       message.set_position(5, 5);
+       this._group.add_actor(message);
+
+       this._clock = new Clutter.Label({ font_name: "Sans Bold 16px",
+                                         text: "" });
+       this._clock.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
+       this._clock.set_position(global.screen_width - 5, 5);
+       this._group.add_actor(this._clock);
+
+       message.connect('button-press-event',
+           function(o, event) {
+               log('Clicked!');
+               return true;
+            });
+
+       global.stage.add_actor(this._group);
+
+       this._updateClock();
+       this._startClock();
+    },
+
+    _startClock: function() {
+       let me = this;
+       Mainloop.timeout_add_seconds(1,
+           function() {
+               me._updateClock();
+               return true;
+           });
+    },
+
+    _updateClock: function() {
+       this._clock.set_text(new Date().toLocaleFormat("%H:%M:%S"));
+       this._clock.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
+
+       return true;
+    }
+};